<template>
  <div class="reserve-form">
    <van-cell-group inset>
      <van-field
        v-if="!!selfForm.appointmentPublishCode"
        :model-value="selfForm.appointmentPublishCode"
        name="id"
        label="发布编号"
        readonly
      />

      <!-- <van-field
        :model-value="selfForm.grade?.name"
        is-link
        readonly
        name="grade"
        label="年级"
        placeholder="点击选择年级"
        :rules="[{ required: true, message: '请输入' }]"
        @click="showGradePicker = true"
      /> -->

      <ClassSelect v-model:visible="showGradePicker" v-model="selfForm.grade">
      </ClassSelect>

      <!-- <van-field
          :model-value="form.reserveDate"
          is-link
          readonly
          name="grade"
          label="可以预约日期"
          @click="showReserveDatePicker = true"
        />

        <van-popup v-model:show="showReserveDatePicker" position="bottom">
          <van-datetime-picker
            type="date"
            title="选择年月日"
            :min-date="minDate"
            @confirm="onConfirm"
            @cancel="showReserveDatePicker = false"
          />
        </van-popup> -->

      <ReserveDateSelect
        v-model="selfForm.reserveDate"
        :max-hour="Number(form.reserveEndTime?.split(':')[0] || 23)"
      ></ReserveDateSelect>

      <ReserveTimeSelect
        v-model="selfForm.reserveStartTime"
        :max-hour="maxHour"
      ></ReserveTimeSelect>

      <ReserveTimeSelect
        v-model="selfForm.reserveEndTime"
        :mode="false"
        :min-hour="minHour"
      ></ReserveTimeSelect>

      <!-- <DeadlineSelect
        v-model="selfForm.deadline"
        :reserve-date="selfForm.reserveDate"
      ></DeadlineSelect> -->

      <!-- <van-field
        v-model="selfForm.maxNum"
        name="maxNum"
        label="最大预约人数"
        type="digit"
        :rules="[{ required: true, message: '请输入' }]"
      /> -->

      <!-- <van-field
        v-model="selfForm.description"
        name="description"
        label="预约发布说明"
        rows="2"
        autosize
        type="textarea"
        placeholder="请各位家长在预约前，事先准备些想要咨询的问题。非常感谢！"
        :rules="[{ required: true, message: '请输入' }]"
      /> -->
    </van-cell-group>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  ref,
  defineExpose,
  defineProps,
  defineEmits,
  Ref,
  computed,
} from 'vue'
import ClassSelect from '/@/components/ClassSelect.vue'
import dayjs from 'dayjs'
import ReserveDateSelect from './ReserveDateSelect.vue'
import ReserveTimeSelect from './ReserveTimeSelect.vue'
import DeadlineSelect from './DeadlineSelect.vue'
import { IForm } from '../types'
import { useVModel } from '@vueuse/core'
import { toParams } from '../utils'

const props = defineProps({
  form: {
    type: Object,
    default: () => ({
      // id: 'FB-210818-2',
      // grade: null,
      reserveDate: dayjs().format('YYYY/MM/DD'),
      reserveStartTime: '',
      reserveEndTime: '',
      maxNum: 5,
      // description: '',
      deadline: '',
    }),
  },
})

const emit = defineEmits(['update:form'])

const selfForm = useVModel(props, 'form', emit) as Ref<IForm>

const minHour = computed(() =>
  selfForm.value.reserveStartTime
    ? dayjs(toParams(selfForm.value).startTime).hour()
    : 0
)

const maxHour = computed(() =>
  selfForm.value.reserveEndTime
    ? dayjs(toParams(selfForm.value).endTime).hour()
    : 23
)

// const form = reactive<IForm>({
//   id: 'FB-210818-2',
//   grade: null,
//   reserveDate: dayjs().format('YYYY/MM/DD'),
//   reserveStartTime: '',
//   reserveEndTime: '',
//   maxNum: 5,
//   description: '',
//   deadline: '',
// })

const showGradePicker = ref(false)

// defineExpose({
//   toParams,
// })

const { handleSubmit } = useSubmit(selfForm.value)

function useSubmit(form: IForm) {
  return {
    handleSubmit() {
      // const params = toParams(form)
    },
  }
}
</script>

<style lang="less" scoped>
.reserve-form {
  margin-bottom: 20px;
}
</style>
